<template>
  <div class="app-container">
    <div class="card-container" v-loading="loading">
      <el-row :gutter="20">
        <el-col
          :span="8"
          v-for="homework in s_homeworkList"
          :key="homework.id"
        >
          <el-card
            class="card-item"
            shadow="hover"
            @click="handleCardClick(homework)"
          >
            <div class="card-header">
              <p class="student-name">{{ homework.studentName }}</p>
            </div>
            <div class="card-content">
              <p>作业名称: {{ homework.homeworkName }}</p>
              <p>
                <span :class="['status', homework.isSubmit === 0 ? 'not-submitted' : 'submitted']">
                  {{ homework.isSubmit === 0 ? '未提交' : '已提交' }}
                </span>
              </p>
              <p>提交时间: {{ parseTime(homework.submitTime) }}</p>
              <p>得分: {{ homework.score }}</p>
              <p>总分: {{ homework.allScore }}</p>
              <p>及格分: {{ homework.pass }}</p>
              <p>
                <span :class="['status', homework.isPass === 0 ? 'failed' : 'passed']">
                  {{ homework.isPass === 0 ? '未及格' : '已及格' }}
                </span>
              </p>
              <p>
                <span :class="['status', homework.isMark === 0 ? 'unmarked' : 'marked']">
                  {{ homework.isMark === 0 ? '未批改' : '已批改' }}
                </span>
              </p>
              <p>备注: {{ homework.remark || '无' }}</p>
            </div>
            <div class="card-actions">
              <el-button
                v-if="homework.isSubmit === 0"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click.stop="handleInter(homework)"
                v-hasPermi="['course:s_homework:edit']"
              >
                进入
              </el-button>
              <el-button
                v-if="homework.isSubmit === 1"
                size="mini"
                type="text"
                icon="el-icon-search"
                @click.stop="handleInter(homework)"
                v-hasPermi="['course:s_homework:search']"
              >
                查看
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { listS_homework } from "@/api/course/s_homework";
import { listUser } from "@/api/system/user";

export default {
  name: "S_homework",
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      loading: true,
      s_homeworkList: [],
      studentData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sId: null,
        hId: null,
        isSubmit: null,
        submitTime: null,
        score: null,
        allScore: null,
        pass: null,
        isPass: null,
        isMark: null,
        remark: null
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleInter(homework) {
      if (homework.isSubmit === 0) {
        this.$router.push({ path: '/course/online-exam', query: { homeworkId: homework.id } });
      } else {
        this.$router.push({ path: '/course/s_homework/view', query: { homeworkId: homework.id } });
      }
    },
    handleCardClick(homework) {
      this.handleInter(homework);
    },
    getList() {
      this.loading = true;
      listS_homework(this.queryParams).then(response => {
        this.s_homeworkList = response.rows;
        this.loading = false;
      });
      listUser(this.queryParams).then(response => {
        this.studentData = response.rows;
        this.loading = false;
      });
    },
    parseTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return date.toISOString().slice(0, 19).replace('T', ' ');
    }
  }
};
</script>

<style scoped>
.card-container {
  text-align: center;

}
.card-item {
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}
.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
}
.student-name {
  font-size: 18px;
  color: #333;
}
.card-content p {
  font-size: 14px;
  margin: 5px 0;
  color: #666;
}

.status {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;
}

.not-submitted {
  color: #ff4d4f;
  background-color: #ffe1e1;
}

.submitted {
  color: #52c41a;
  background-color: #e6fffb;
}

.failed {
  color: #ff4d4f;
  background-color: #fff1f0;
}

.passed {
  color: #52c41a;
  background-color: #e6fffb;
}

.unmarked {
  color: #ffa940;
  background-color: #fff7e6;
}

.marked {
  color: #52c41a;
  background-color: #e6fffb;
}

.card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.el-button {
  width: 90px;
  font-size: 12px;
  border-radius: 20px;
  padding: 6px;
  color: #409EFF;
}
.el-button:hover {
  color: #ffffff;
  background-color: #409EFF;
}
</style>
